<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>骰子布局</title>
    <style>
        #app {
            display: flex;
            width: 320px;
            height: 210px;
            justify-content: space-between;
            align-content: space-between;
            margin: 250px auto;
            flex-wrap: wrap;
        }

        #app > div {
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 5px;
            display: flex;
            padding: 10px;
        }

        #app > div span {
            width: 20px;
            height: 20px;
            background: #333;
            border-radius: 50%;
            /*居中方式一*/
            /*margin: auto;*/
        }

        .box1 {
            /*居中方式二*/
            justify-content: center;
            align-items: center;
            /*居中方式二*/
        }

        .box2 {
            justify-content: space-around;
            align-items: center;
        }

        .box3 {
            justify-content: space-around;
            align-items: center;
        }

        .box3 span:nth-child(1) {
            align-self: flex-start;
        }

        .box3 span:nth-child(2) {
            align-self: center;
        }

        .box3 span:nth-child(3) {
            align-self: flex-end;
        }

        .box4 {
            justify-content: space-around;
        }

        .box4 > .column {
            flex-direction: column;
            justify-content: space-around;
            display: flex;
        }

        .box5 {
            justify-content: space-between;
        }

        .box5 > .column {
            flex-direction: column;
            justify-content: space-between;
            display: flex;
        }

        .box5 > span {
            align-self: center;
        }

    </style>
</head>
<body>

<div id="app">
    <div class="box1">
        <span></span>
    </div>
    <div class="box2">
        <span></span>
        <span></span>
    </div>
    <div class="box3">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="box4">
        <div class="column">
            <span></span>
            <span></span>
        </div>
        <div class="column">
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="box5">
        <div class="column">
            <span></span>
            <span></span>
        </div>
        <span></span>
        <div class="column">
            <span></span>
            <span></span>
        </div>
    </div>

    <div class="box4">
        <div class="column">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="column">
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</div>

</body>
</html>